<!DOCTYPE html>
<html lang="zh_cn">

<head>
    <meta charset="utf-8">
    <title>{% block title %} zookeeper 管理平台 {% endblock %} </title>
    <link href="{{ url_for('static', filename="css/bootstrap.min.css") }}" rel="stylesheet">
    <script src="{{ url_for('static', filename="js/jquery.min.js") }}"></script>
    <script src="{{ url_for('static', filename="js/bootstrap.min.js") }}"> </script>
    <script src="{{ url_for('static', filename="js/main.js") }}"> </script>

    {% block js %}
    {% endblock %}
</head>
{% from "macros.html" import render_form %}

<body>
    <!--模态框-->
    <!-- 节点选择（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        节点选择
                    </h4>
                </div>
                <div class="modal-body">
                    {{ render_form(form, url_for('route.env_data')) }}
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!--添加节点模态框-->
    <div class="modal fade" id="addNodeModal" tabindex="-1" role="dialog" aria-labelledby="addNodeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myCopyLabel">添加新节点</h4>
                </div>

                <div class="modal-body" id="addNewNode">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label ">选择环境:</label>
                            <div class="col-sm-10">
                                <select class="form-control " id="addNodeEnv" name="env" required="">
                                    {% for env in counts.env_list %}
                                    <option value={{env[1]}}>{{env[1]}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label ">节点名:</label>
                            <div class="col-sm-10">
                                <input type="text" required="required" class="form-control " id="inputAddNode"
                                    placeholder="请输入新的节点，例如：/zookeeper/web">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label ">密码:</label>
                            <div class="col-sm-10">
                                <input type="password" required="required" class="form-control" id="inputAddNodePass"
                                    placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label ">版本:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputAddNodeVersion"
                                    placeholder="请输入新的版本，非必填，不填则不创建版本">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <input type="button" value="提交" class="btn btn-default " onclick="addNodeSubmit()"
                                    data-dismiss="modal">
                            </div>
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!--添加版本模态框-->
    <div class="modal fade" id="addVersionModal" tabindex="-1" role="dialog" aria-labelledby="addVersionLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myCopyLabel">添加新版本</h4>
                </div>

                <div class="modal-body" id="addNewVersion">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label ">版本:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="addVersionVersion"
                                    placeholder="请输入新的版本">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <input type="button" value="提交" class="btn btn-default " onclick="addVersionSubmit()"
                                    data-dismiss="modal">
                            </div>
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 导航 -->
    {% block nav %}
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Zookeeper Manager</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a data-toggle="modal" data-target="#myModal" class="btn-default ">
                            切换节点
                        </a>
                    </li>
                </ul>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <!-- <li><a href="/">Home <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Link</a></li> -->
                        {% if counts.password_check %}
                        <li><a type="button" class="btn-default" onclick="addNode()">添加节点</a></li>
                        {%endif%}
                        {% if counts.env %}
                        <li><a>当前环境:</a></li>
                        <li><a id=nowEnv value={{counts.env}}>{{counts.env}}</a></li>
                        {% endif %}
                        {% if counts.node %}
                        <li><a>当前节点:</a></li>
                        <li><a id=nowNode value={{ counts.node }}>{{ counts.node }}</a></li>
                        {% endif %}

                    </ul>
                    {% if counts.version %}
                    <ul class="nav navbar-nav navbar-right">
                        <li><a>当前版本:</a></li>
                        <li><a id=nowVersion value={{ counts.version }}>{{ counts.version }}</a></li>
                        {% if counts.password_check %}
                        <li><a type="button" class="btn-default" onclick="addVersionModel()">添加版本</a></li>
                        {%endif%}
                    </ul>

                    {%  endif %}
                    <!--
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                            -->
                </div>



            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    {% endblock %}
    <div class="container">
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        {% for category, message in messages %}
        <div class="alert alert-{{ category }} alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>
            {{ message }}
        </div>
        {% endfor %}
        {% endif %}
        {% endwith %}
    </div>

    {% block body %}

    {% endblock %}

    <nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="container">
            {% block footer %}
            &COPY; Copyright 2019 by <a href="#">zk管理平台</a>>
            {% endblock %}
        </div>
    </nav>
</body>

</html>
